<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    用户名：<input type="text" id="username"><span></span><br>
    密码：<input type="text" id="password"><span></span><br>
    重复密码：<input type="text" id="password2"><span></span><br>
    手机号：<input type="text" id="tel"><span></span><br>
    邮箱：<input type="text" id="email"><span></span><br>
    <input type="button" id="btn" value="提交">
</body>
<script>
    // 1.用户名           用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    // 2.密码的规则        数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
    // 3.重复密码            跟第一次输入 密码一致
    // 4.手机号的验证      第一位必须为1，后面再加10位数字
    // 5.邮箱                数字大小写字母_- 3到12位   @  数字字母 2到9位  . 字母2到5位
    // 6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳

    var oun = document.getElementById("username");
    var opd = document.getElementById("password");
    var opd2 = document.getElementById("password2");
    var otel = document.getElementById("tel");
    var oem = document.getElementById("email");
    var obtn = document.getElementById("btn");

    // 提前为每个验证框准备记录验证成功或失败的状态
    var un=false,pw=false,pw2=false,tel=false,em=false;

    oun.onblur = function(){
        var span = this.nextElementSibling;
        // span.innerHTML = /^[\u2E80-\u9FFF\w\-]{4,20}$/.test(this.value) ? "ok" : "no";
        if(/^[\u2E80-\u9FFF\w\-]{4,20}$/.test(this.value)){
            span.innerHTML = "ok";
            un = true;
        }else{
            span.innerHTML = "no";
            un = false;
        }
    }
    opd.onblur = function(){
        var span = this.nextElementSibling;
        // 是否包含数字
        var a = /\d/.test(this.value) ? 1 : 0;
        // 是否包含字母
        var b = /[a-z]/i.test(this.value) ? 1 : 0;
        // 是否包含特殊
        var c = /[^a-z\d]/i.test(this.value) ? 1 : 0;
        switch(a+b+c){
            case 1:span.innerHTML = "弱";break;
            case 2:span.innerHTML = "中";break;
            case 3:span.innerHTML = "强";break;
        }
        pw = true;

        if(opd2.value === "") return;
        // opd2.nextElementSibling.innerHTML = this.value === opd2.value ? "一致" : "不一致";
        if(this.value === opd2.value){
            opd2.nextElementSibling.innerHTML = "一致"
            pw2 = true;
        }else{
            opd2.nextElementSibling.innerHTML = "不一致"
            pw2 = false;
        }
    }
    opd2.onblur = function(){
        var span = this.nextElementSibling;
        // span.innerHTML = this.value === opd.value ? "一致" : "不一致";
        if(this.value === opd.value){
            span.innerHTML = "一致"
            pw2 = true;
        }else{
            span.innerHTML = "不一致"
            pw2 = false;
        }
    }

    otel.onblur = function(){
        var span = this.nextElementSibling;
        // span.innerHTML = /^1[3-9]\d{9}$/.test(this.value) ? "ok" : "no";
        if(/^1[3-9]\d{9}$/.test(this.value)){
        }else{
            span.innerHTML = "no";
            tel = false;
        }
    }

    oem.onblur = function(){
        var span = this.nextElementSibling;
        // span.innerHTML = /^[\w-]{2,10}@[\da-z]{2,10}\.[a-z]{2,4}$/.test(this.value) ? "ok" : "no";
        if(/^[\w-]{2,10}@[\da-z]{2,10}\.[a-z]{2,4}$/.test(this.value)){
            span.innerHTML = "ok";
            em = true;
        }else{
            span.innerHTML = "no";
            em = false;
        }
    }


    // 最后点击提交按钮时
    obtn.onclick = function(){
        // 判断每个输入框的状态即可
        if(un && pw && pw2 && tel && em){
            alert("成功")
        }else{
            // 作业：提示哪个选项验证失败
            alert("失败")
        }
    }

</script>
</html>